<template>
  <div class="container">
    <el-card class="box-card">
      <!-- 头部 -->
      <div class="tag-head">
        <!-- 表单区域 -->
        <el-row>
          <el-col :span="22">
            <el-form ref="form" :model="form" label-width="80px" inline>
              <el-form-item label="标签名称">
                <el-input v-model="form.keyword" width="20px"></el-input>
              </el-form-item>

              <el-form-item label="状态">
                <el-select v-model="form.state" placeholder="请选择">
                  <el-option label="启用" value="1"></el-option>
                  <el-option label="禁用" value="0"></el-option>
                </el-select>
              </el-form-item>

              <!-- 按钮区域 -->
              <el-form-item>
                <el-button size="small" @click="clearBtn">清除</el-button>
                <el-button type="primary" size="small" @click="searchFn"
                  >搜索</el-button
                >
              </el-form-item>
            </el-form>
          </el-col>

          <el-col :span="2">
            <el-button
              type="success"
              size="small "
              icon="el-icon-edit"
              class="addbtn"
              @click="addBtn"
              >新增标签</el-button
            >
          </el-col>
        </el-row>
        <!-- 提示信息 -->
        <el-alert type="info" show-icon :closable="false">
          数据一共 {{ total }} 条
        </el-alert>
      </div>

      <!-- 主体 表格区域 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" label="序号" width="120">
        </el-table-column>
        <el-table-column prop="title" label="文章标题">
          <template slot-scope="scope">
            <span
              >{{ scope.row.title }}
              <a
                href="#"
                class="el-icon-film videoIcon"
                v-if="scope.row.videoURL"
                @click="iconFn(scope.row.videoURL)"
              ></a
            ></span>
          </template>
        </el-table-column>
        <el-table-column prop="visits" label="阅读数"> </el-table-column>
        <el-table-column prop="username" label="录入人"> </el-table-column>
        <el-table-column prop="createTime" label="录入时间">
          <template slot-scope="scope">
            <span>{{ timeFn(scope.row.createTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" width="120">
          <template slot-scope="scope">
            <span>{{ scope.row.state === 1 ? "已启用" : "已禁用" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="previewFn(scope.row.id)"
              >预览</el-button
            >
            <el-button type="text" @click="isForbiddenBtn(scope.row.id)">{{
              scope.row.state === 1 ? "禁用" : "启用"
            }}</el-button>
            <el-button
              type="text"
              :disabled="scope.row.state === 1"
              @click="putBtn(scope.row.id)"
              >修改</el-button
            >
            <el-button
              type="text"
              :disabled="scope.row.state === 1"
              @click="delBtn(scope.row.id)"
              >删除</el-button
            >
            <!-- data.items[5].videoURL -->
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-row type="flex" justify="space-between">
        <el-col></el-col>
        <el-col>
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pagination.page"
            :page-sizes="[5, 10, 20, 50]"
            :page-size="1"
            layout=" prev, pager, next, sizes, jumper"
            :total="total"
          >
          </el-pagination>
        </el-col>
      </el-row>

      <!-- 添加 / 编辑 弹窗 -->
      <el-dialog
        width="40%"
        height="50%"
        title="新增文章"
        :visible.sync="dialogVisible"
        @close="closeReuse"
      >
        <articlesAdd
          v-if="dialogVisible"
          @close="closeFn"
          @success="successFn"
          :articleId="articleId"
          :isEdit="isEdit"
        ></articlesAdd>
      </el-dialog>

      <!-- 预览 弹窗 -->
      <el-dialog title="预览文章" :visible.sync="previewShow" width="50%">
        <articlePreview
          v-if="previewShow"
          :articleDetail="articleDetail"
        ></articlePreview>
      </el-dialog>

      <!-- <el-dialog title="提示" :visible.sync="videoShow" width="45%" center class="ll">
        <video
          src="https://v-cdn.zjol.com.cn/277003.mp4"
          v-if="videoShow"
          autoplay
          loop
        ></video>
      </el-dialog> -->
    </el-card>

    <!-- 视频  -->
    <div class="videoFather" v-if="videoShow">
      <el-button
        type="info"
        circle
        v-if="videoShow"
        class="el-icon-close closeVideo"
        @click="closeVideo"
      ></el-button>
      <video
        :src="videoUrl"
        v-if="videoShow"
        autoplay
        loop
      ></video>
    </div>
  </div>
</template>

<script>
import articlePreview from '../components/articles-preview.vue'
import articlesAdd from '../components/articles-add.vue'

import { list, detailAPI, changeState, remove } from '@/api/hmmm/articles.js'

import dayjs from 'dayjs' // ES 2015

export default {
  name: 'articles',
  data () {
    return {
      dialogVisible: false, // 添加 / 编辑 弹窗 是否展示
      previewShow: false, // 预览 弹窗 是否展示
      // 表单 数据
      form: {
        keyword: null,
        state: null
      },
      tableData: [], // 表格 数据
      currentPage: 1, // 页面 创建  时的 页码数
      pagination: {
        page: 1, // 当前页
        pagesize: 5 // 每页条数
      },
      total: 0, // 数据 总条数
      articleDetail: {},
      videoShow: false, // 视频 是否 展示
      videoUrl: null, // 视频 地址
      isEdit: false, // 是否为 编辑
      articleId: ''// 文章id
    }
  },
  components: {
    articlePreview,
    articlesAdd
  },
  created () {
    this.getList()
  },
  methods: {
    // 清除 按钮
    clearBtn () {
      this.form = {
        keyword: null,
        state: null
      }
    },

    // 搜索 按钮
    searchFn () {
      this.getList()
    },

    // 添加 按钮区域
    addBtn () {
      this.dialogVisible = true
    },

    // 添加 / 编辑 弹窗 关闭 时
    closeReuse () {
      this.isEdit = false
    },

    // 预览 按钮
    async previewFn (id) {
      this.previewShow = true
      const res = await detailAPI(id)
      // console.log(res)
      this.articleDetail = res.data

      // this.$alert(res.data.articleBody, '', {
      //   dangerouslyUseHTMLString: true
      // })
    },

    // 禁用/启用 按钮区域
    async isForbiddenBtn (id) {
      const res = await detailAPI(id)
      // console.log(res)
      if (res.data.state === 1) {
        await changeState({ id, state: 0 })
      } else {
        await changeState({ id, state: 1 })
      }
      this.getList()
    },

    // 修改 按钮区域
    async putBtn (id) {
      this.isEdit = true
      this.articleId = id
      this.dialogVisible = true
      console.log(this.articleId)

      // const res = await detail({ id })
      // console.log(res)
      // this.articleDetail = res.data
    },

    // 删除 按钮区域
    async delBtn (id) {
      const result = await this.$confirm(
        '此操作将永久删除该文件, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
      // console.log(result)
      if (result === 'confirm') {
        // console.log(2)
        if (this.tableData.length === 1) {
          this.pagination.page = this.pagination.page - 1
        }
        await remove({ id })

        this.$message.success('操作成功')

        this.getList()
      }
    },

    // 格式化 时间
    timeFn (time) {
      return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
    },

    // 文章列表获取
    async getList () {
      // console.log({ ...this.pagination, ...this.form })
      const res = await list({ ...this.pagination, ...this.form })
      // console.log(res)
      this.tableData = res.data.items
      this.total = res.data.counts
    },

    // 视频 播放
    iconFn (videoUrl) {
      this.videoShow = true
      // console.log(videoUrl)
      this.videoUrl = videoUrl
    },

    // 关闭视频
    closeVideo () {
      this.videoShow = false
    },

    // 关闭弹窗 子传父
    closeFn () {
      this.dialogVisible = false
    },

    // 添加成功 子传父  关闭弹窗
    successFn () {
      this.dialogVisible = false
      this.getList()
    },

    // 页码 条数 变化
    handleSizeChange (val) {
      // console.log(val)
      console.log(this.tableData.length)
      // console.log(1 + val)
      if (this.tableData.length < val) {
        this.pagination.page = this.pagination.page - 1
      }
      this.pagination.pagesize = val
      this.getList()
      console.log(this.pagination.page)
    },

    // 当前页 变化
    handleCurrentChange (val) {
      // console.log(val)
      this.pagination.page = val
      this.getList()
    }
  }
}
</script>

<style scoped >
.box-card {
  margin: 10px;
}
::v-deep .el-input__inner {
  height: 32px;
}
.tag-head {
  margin-bottom: 10px;
}
::v-deep .el-icon-film:before {
  color: blue;
  font-size: 18px;
}
/* ::v-deep .el-dialog__header {
  background-color: transparent;
  display: none;

}
::v-deep .el-dialog__body {
  background-color: transparent;
  padding: 0;
}
video{
  width: 100%;
  height: 100%;
}
::v-deep .el-icon-close{
  z-index: 999;
  color: aliceblue;
  position: relative;
  left: 50%;
  top: 20%;
} */
.videoFather {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  z-index: 9999;
}
video{
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 50%;
  height: 50%;
}
::v-deep .closeVideo{
  position: fixed;
  left: 50%;
  top: 5%;
  font-size: 30px;
  background: rgba(0, 0, 0, 0.3);
  transform: translate(-50%,-50%);
  border: 0;
}
</style>
// "https://v-cdn.zjol.com.cn/276984.mp4"
